<template>
    <div class="form-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">硕士学位申请系统</el-breadcrumb-item>
            <el-breadcrumb-item>学位申请</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        <div class="title-input">答辩申请</div>-->
        <h2>学位申请</h2>
        <el-form label-width="140px" class="demo-ruleForm" ref="form" :model="form">
            <el-form-item label="学号" prop="student_id">
                <el-input v-model="form.student_id" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.student_name" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="院系所" prop="college">
                <el-select v-model="form.college" placeholder="请选择" @change="onCollegeChange">
                    <el-option
                            v-for="college in form.colleges"
                            :key="college.value"
                            :label="college.label"
                            :value="college.value"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="硕士专业" prop="major">
                <el-select v-model="form.student_major" placeholder="请选择">
                    <el-option
                            v-for="major in filteredMajors"
                            :key="major.value"
                            :label="major.label"
                            :value="major.value"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="研究方向" prop="research_field">
                <el-input v-model="form.research_field" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="入学年月" prob="entrance_date">
                <el-date-picker
                        v-model="form.entrance_date"
                        type="date"
                        placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="导师姓名" prop="tutor">
                <el-input v-model="form.mentor_name" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="论文题目" prop="thsis_title">
                <el-input v-model="form.thsis_title" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="论文撰写开始时间" prop="spell">
                <el-date-picker
                        v-model="form.start_date_of_thsis"
                        type="date"
                        placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="论文撰写结束时间" prop="gender">
                <el-date-picker
                        v-model="form.end_date_of_thsis"
                        type="date"
                        placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="论文答辩时间" prop="country">
                <el-date-picker
                        v-model="form.defense_date_of_thsis"
                        type="date"
                        placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm()">提交申请</el-button>
                <el-button type="info" @click="resetForm">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                student_id: "",
                student_name: "",

                college: null,
                colleges: [
                    {value: '计算机科学与技术学院'},
                    {value: '软件工程学院'},
                    {value: '机械工程学院'},
                    {value: '电气工程学院'},
                    {value: '化学工程学院'},
                    {value: '生命科学学院'},
                    {value: '经济学院'},
                    {value: '心理学院'},
                    {value: '音乐学院'},
                    {value: '艺术学院'},
                    {value: '外国语学院'},
                    {value: '法学院'},
                    {value: '医学院'},
                    {value: '传媒学院'},
                    {value: '土木工程学院'},
                    {value: '环境科学与工程学院'},
                    {value: '数学与统计学院'},
                    {value: '物理学院'},
                    {value: '化学学院'},
                    {value: '历史学院'},
                    {value: '社会学院'},
                ],

                student_major: null,
                student_majors: [
                    {
                        value: 1,
                        label: "软件工程",
                        belong: "软件工程学院"
                    },
                    {
                        value: 2,
                        label: "嵌入式",
                        belong: "软件工程学院"
                    },
                    {
                        value: 3,
                        label: "密码学",
                        belong: "软件工程学院"
                    },
                    {
                        value: 4,
                        label: '计算机科学',
                        belong: '计算机科学与技术学院'
                    },
                    {
                        value: 5,
                        label: '软件工程',
                        belong: '计算机科学与技术学院'
                    },
                    {
                        value: 6,
                        label: '机械工程',
                        belong: '机械工程学院'
                    },
                    {
                        value: 7,
                        label: '电气工程',
                        belong: '电气工程学院'
                    },
                ],
                entrance_date: "",
                mentor_name: "",

                thsis_title: "",
                start_date_of_thsis: "",
                end_date_of_thsis: "",
                defense_date_of_thsis: "",
            },

            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            }
        };
    },
    computed: {
        filteredMajors() {
            if (this.form.college) {
                return this.form.student_majors.filter(major => major.belong === this.form.college);
            } else {
                return [];
            }
        }
    },
    methods: {
        onCollegeChange() {
            this.form.student_major = null; // 重置第二级下拉框的选择
        },
        resetForm() {
            this.$refs.form.resetFields();
        },
        checkDate1() {
            if (this.date2 && this.date2 < this.date1) {
                this.date2 = this.date1;
            }
            if (this.date3 && this.date3 < this.date2) {
                this.date3 = this.date2;
            }
        },
        checkDate2() {
            if (this.date3 < this.date2) {
                this.date3 = this.date2;
            }
            if (this.date3 < this.date1) {
                this.date3 = this.date1;
            }
        },
    },

}
</script>

<style scoped>
</style>
